<template>
	<!-- v-show="columns.length" 控制在审核菜单中，隐藏详细信息中没有明细表的数据 -->
	<view class="vol-table" :class="className" v-show="columns.length">
		<!--     自定义显示 -->
		<view v-if="custom">
			<u-list :upperThreshold="-999" v-if="tableHeight" :height="tableHeight" @scrolltolower="scrolltolower">
				<!-- 小程序不支持标签里面调用方法。manifest.json并且要配置	"scopedSlotsCompiler":"legacy",属性 -->
				<!-- 	<view v-for="(row,dataIndex) in rowsData" :key="dataIndex">
					<slot name="row" :row="row" :column="inColumns" :index="dataIndex" :page="page"></slot>
				</view> -->
				<slot name="data" :rows="rowsData" :column="inColumns" :page="page"></slot>
			</u-list>
		</view>
		<!-- 		水平显示 -->
		<view v-else-if="direction == 'horizontal'" class="tableBox">
			<u-empty mode="list" class="wuShuJv" v-if="!rowsData.length && page > 0" text="无数据" icon="../../static/imgs/wushujv.png"></u-empty>
			<view class="vol-table-head">
				<view class="cell-index" v-if="index">#</view>
				<!-- <view  class="cell-ck vol-table-head-cell" v-if="ck"> -->
				<view class="cell-index" v-if="ck">
					<u-checkbox-group @change="checkAll">
						<u-checkbox :checked="checked" :size="16"></u-checkbox>
					</u-checkbox-group>
					<!-- <u-checkbox v-model="checked" :size="16"></u-checkbox> -->
				</view>

				<view
					@click="headerClick(column)"
					class="vol-table-head-cell"
					:style="{ width: column.width + 'px', flex: column.width ? 'unset' : 1 }"
					:class="['vol-table-cell-' + (column.align || 'center')]"
					v-if="!column.hidden"
					:key="index"
					v-for="(column, index) in inColumns"
				>
					<!-- 					:style="{ width: column.width + 'px', flex: column.width ? 'unset' : 1, fontSize: '12px' }" -->
					{{ column.title }}
					<text v-if="column.sort" class="cell-order" :class="{ 'acitved-sort': sort == column.field, 'acitved-order': order == 'asc' }">↑</text>
					<text v-if="column.sort" class="cell-order" :class="{ 'acitved-sort': sort == column.field, 'acitved-order': order == 'desc' }">↓</text>
				</view>
			</view>
			<view class="vol-table-body">
				<!-- 2025.01.03 固定表体高度 -->
				<!-- <u-list :upperThreshold="-999" v-if="tableHeight" :height="tableHeight" lower-threshold="100" @scrolltolower="scrolltolower"> -->
				<u-list :upperThreshold="-999" v-if="tableHeight" height="500" lower-threshold="100" @scrolltolower="scrolltolower">
					<view @click="tableRowClick(rowindex, columns)" :key="rowindex" class="vol-table-body-rows" v-for="(row, rowindex) in rowsData">
						<view class="cell-index" v-if="index">
							{{ rowindex + 1 }}
						</view>
						<!-- <view  class="cell-ck vol-table-body-cell" v-if="ck"> -->
						<view class="cell-index" v-if="ck">
							<!-- <u-checkbox v-model="row.ck" :size="16"></u-checkbox> -->

							<u-checkbox-group
								@change="
									() => {
										rowItemCheckClick(row, rowindex);
									}
								"
							>
								<u-checkbox :checked="row.ck" :size="16"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view
							:style="{ width: column.width + 'px', flex: column.width ? 'unset' : 1 }"
							:key="cindex"
							class="vol-table-body-cell"
							:class="[textInline ? 'text-inline' : '', 'vol-table-cell-' + (column.align || 'center')]"
							v-if="!column.hidden"
							v-for="(column, cindex) in columns"
						>
							<view class="vol-cell" @click.stop="cellClick(rowindex, row, column)" v-if="column.click">
								<view :style="column.style" v-if="column.formatter">
									<rich-text :nodes="rowFormatter(row, column, rowindex) + ''"></rich-text>
								</view>
								<view :style="column.style" v-else>{{ row[column.field] }}</view>
							</view>
							<view class="vol-cell" v-else-if="column.formatter">
								<rich-text :nodes="rowFormatter(row, column, rowindex) + ''"></rich-text>
							</view>
							<!-- 2025.3.10 本来@click="previewImage(row[column.field], index)"写在u--image里边得点击事件  -->
							<view class="vol-cell" v-else-if="column.type == 'img'">
								<!-- 查看图片功能  -->
								<!-- <u--image  @click="previewImage(row[column.field], index)"
									style="float: left; margin-left: 5px"
									width="40px"
									height="40px"
									radius="4px"
									:src="src"
									v-for="(src, index) in getImgSrc(row[column.field])"
									:key="index"
								></u--image> -->
								<!-- 回显删除 -->
								<!-- <u-upload v-if="getImgUrl(row[column.field]).length" :sizeType="['compressed']"
									@delete="(event)=>{deletePic(rowindex,column,event)}" name="3" :multiple="false"
									:fileList="getImgUrl(row[column.field])" 
									maxCount="3" previewFullImage :showUploadBtn="false">
								</u-upload> -->
								<u-upload ref="imageurl" :sizeType="['compressed']"
									 @afterRead="(event)=>{afterRead(row,rowindex,event)}"
									@delete="(event)=>{deletePic(rowindex,column,event)}" name="3" :multiple="false"
									:fileList="getImgUrl(row[column.field])" 
									maxCount="4" previewFullImage >
								</u-upload>
								<!-- 上传图片 -->
								<!-- <u-upload ref="imageurl" :sizeType="['compressed']"
									 @afterRead="(event)=>{afterRead(row,rowindex,event)}"
									@delete="(event)=>{deletePic(rowindex,column,event)}" name="3" :multiple="false"
									:fileList="fileList[rowindex]" 
									maxCount="3" previewFullImage >
								</u-upload> -->
							</view>
							<view class="vol-cell" v-else-if="column.bind">
								{{ rowFormatterValue(row, column) }}
							</view>
							<view v-else-if="column.type == 'editor'">
								<u-parse :content="row[column.field]"></u-parse>
							</view>
							<view class="vol-cell" v-else-if="column.type == 'date'">
								{{ (row[column.field] || '').substr(0, 10) }}
							</view>
							<!-- 2025.02.12 处理select数据 -->
							<view class="vol-cell" v-else-if="column.type == 'select'">
								<!-- row[column.field] -->
								<!-- <input type="text" size='12' disabled v-model="testSelect"/> -->
								{{ selectReturnData(row[column.field], column) }}
							</view>
							<!-- 2025.02.12 处理select数据end -->
							<!-- 2025.01.02测试增加编辑功能 -->
							<view class="vol-cell" v-else-if="column.edit">
								<u--input
									v-show="['number', 'decimal', 'float'].includes(column.type)"
									v-model="row[column.field]"
									:placeholder="column.title"
									clearable
									type="number"
								></u--input>
								<u--input
									v-show="!['number', 'decimal', 'float'].includes(column.type)"
									v-model="row[column.field]"
									:placeholder="column.title"
									clearable
									type="string"
								></u--input>
							</view>
							<view class="vol-cell" v-else-if="column.field == 'Remark' && !column.readonly">
								<u--textarea v-model="row[column.field]" placeholder="备注" autoHeight></u--textarea>
							</view>
							<!-- 2025.01.02测试增加编辑功能end -->
							<view class="vol-cell" v-else>{{ row[column.field] === null ? '' : row[column.field] }}</view>
						</view>
					</view>
					<slot>
						<!-- <view class="tableButtom">到底了~</view> -->
					</slot>
				</u-list>
				<!-- 	显示合计 -->
				<view v-if="hasSummary" :key="rowindex" class="vol-table-body-rows vol-table-summary" v-for="(row, rowindex) in summary">
					<view class="cell-index" v-if="index">合计</view>
					<view
						:style="{ width: column.width + 'px', flex: column.width ? 'unset' : 1 }"
						:class="{ 'text-inline': textInline }"
						:key="cindex"
						class="vol-table-body-cell"
						v-if="!column.hidden"
						v-for="(column, cindex) in columns"
					>
						<view class="vol-cell">{{ base.isEmpty(row[column.field]) ? '' : row[column.field] }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :opacity="0" :show="showOverlay" @click="showOverlay = false">
			<view class="loading-warp">
				<u-loading-icon text="加载中..." textSize="16"></u-loading-icon>
				<!-- 		<view class="loading-warp-msg" @tap.stop>正在加载</view> -->
			</view>
		</u-overlay>
	</view>
</template>

<script>
export default {
	name: 'vol-table-shuiping',
	props: {
		custom: {
			//自定义显示table
			type: Boolean,
			default: false
		},
		size: {
			type: Number,
			default: 30 //分页大小
		},
		loadKey: {
			type: Boolean,
			default: true
		},
		direction: {
			type: String,
			default: 'list' //"horizontal"//list
		},
		titleField: {
			//如果direction是以list显示，可以指定第一个标题
			type: String,
			default: ''
		},
		height: {
			type: Number,
			default: 0
		},
		autoHeight: {
			type: Boolean,
			default: true
		},
		textInline: {
			//超出是否显示省略号
			type: Boolean,
			default: false
		},
		index: {
			//是否显示行号
			type: Boolean,
			default: false
		},
		ck: {
			//设置显示checkbox，只有水平(table)显示类型时才生效
			type: Boolean,
			default: false
		},
		columns: {
			type: Array,
			default: () => {
				return [];
			}
		},
		url: {
			type: String,
			default: ''
		},
		defaultLoadPage: {
			// 传入了url，是否默认加载表格数据
			type: Boolean,
			default: true
		},
		tableData: {
			type: Array,
			default: () => {
				return [];
			}
		},
		biaoming: {
			type: String,
			default: 'left'
		},
		IP: {
			type: String,
			default: 'left'
		},
		rowClick: null,
		detaiDelStatu: {
			type: String,
			default: 'left'
		},
	},
	data() {
		return {
			testSelect: '',
			checked: false,
			showOverlay: false,
			className: 'vol-table-' + ~~(Math.random() * 1000000),
			rowsData: [],
			sort: '',
			order: '',
			tableHeight: 0,
			inColumns: [],
			page: 1,
			loaded: false,
			hasSummary: false,
			lastHeight: 0,
			summary: [],
			fileList:[],// 上传图片路径
			biaoMing:'',
			Ip:'',
			inFormFields: {},
			allFormFieldResults:[],
			urlCode:[],
			//extent-button
		};
	},
	methods: {
		sendDataToParent() {
		      // 触发自定义事件，并传递数据
			  console.log(this.rowsData);console.log("+++++")
		      this.$emit("getTableData", this.rowsData);
		},
		selectReturnData(val, column) {
			// console.log('haha', val);
			// console.log('haha2', column);
			// 请求selectData
			for (var index = 0; index < column.data.length; index++) {
				if(column.data[index].key==val){
					// console.log("column.data[index].value",column.data[index].value);
					return column.data[index].value
				}
			}
			return val;
		},
		scrolltolower() {
			if (!this.url) {
				this.$emit('scrolltolower');
			}
			if (this.loaded) {
				return;
			}
			this.page = this.page + 1;
			this.load();
		},
		load(params, reset) {
			if (!this.url) {
				return;
			}
			let status = true;
			if (reset) {
				//this.rowsData.splice(0);
				this.page = 1;
				this.loaded = false;
			}
			let param = {
				page: this.page,
				rows: this.size,
				sort: this.sort,
				order: this.order || 'desc',
				wheres: [] // 查询条件，格式为[{ name: "字段", value: "xx" }]
			};
			this.$emit('loadBefore', param, (result) => {
				status = result;
			});

			if (!status) return;
			//审批页 已审批最近一周的数据
			if (param.value == 1) {
				let OneWeek = this.base.getOneWeekAgoDate() + ' 00:00:00';
				param.wheres = [{ name: 'CreateDate', value: OneWeek, displayType: 'thanorequal' }];
			}
			//审批页 我的提交 获取非审核通过的信息
			if (param.value == 2) {
				param.wheres = [{ name: 'AuditStatus', value: '0,2,3,4', displayType: 'selectList' }];
			}
			param.wheres = JSON.stringify(param.wheres);
			this.showOverlay = true;
			this.http.post(this.url, param, false).then((data) => {
				this.showOverlay = false;
				this.$emit('loadAfter', data, (result) => {
					status = result;
				});
				if (!status) return;
				if (!data.rows.length || data.rows.length < param.rows) {
					this.loaded = true;
				}
				// for (var i = 0; i < 4; i++) {
				// 	data.rows.push(...JSON.parse(JSON.stringify(data.rows)))
				// }
				//显示合计
				if (data.summary) {
					if (!this.summary.length) {
						let summary = [];
						for (let key in data.summary) {
							let obj = {};
							obj[key] = data.summary[key];
							summary.push(obj);
						}
						this.summary = summary;
					} else {
						this.summary.forEach((x) => {
							for (let key in data.summary) {
								x[key] = data.summary[key];
							}
						});
					}
				}
				if (reset) {
					this.rowsData.splice(0);
				}
				this.rowsData.push(...data.rows);
			});
			this.sendDataToParent()
		},
		tableRowClick(index, columns) {
			if (this.rowClick) {
				this.rowClick(index, this.rowsData[index], columns);
				return;
			}
			this.$emit('rowClick', index, this.rowsData[index], columns);
		},
		rowFormatter(row, column, index) {
			let _val;
			this.$emit('formatter', row, column, index, (val) => {
				_val = val;
			});
			// console.log('shezhisha ', _val);
			return _val;
		},
		rowFormatterValueList(val, column) {
			let valArr = val.split(',').filter((x) => {
				return x !== '' && x !== undefined;
			});
			for (let index = 0; index < valArr.length; index++) {
				column.bind.data.forEach((x) => {
					if (x.key + '' == valArr[index] + '') {
						valArr[index] = x.value;
					}
				});
			}
			return valArr.join(',');
		},
		rowFormatterValue(row, column) {
			if (this.base.isEmpty(row[column.field])) {
				return '';
			}
			let _val = row[column.field] + '';

			if (!column.bind.data.length) {
				return _val;
			}
			//if (column.type == "selectList" || column.type == 'checkbox') {
			if (_val.indexOf(',') != -1) {
				return this.rowFormatterValueList(_val, column);
			}
			let _obj = column.bind.data.find((x) => {
				return x.key + '' == _val;
			});
			if (_obj) {
				return _obj.value;
			}
			return _val;
		},
		getListTitleValue(row, index) {
			let column = this.inColumns.find((x) => {
				return x.field == this.titleField;
			});
			if (column.formatter) {
				return this.rowFormatter(row, column, index);
			}

			if (column.bind) {
				return this.rowFormatterValue(row, column);
			}
			if (column.type == 'date') {
				return (row[this.titleField] || '--').substr(0, 10);
			}
			return row[this.titleField] || '--';
		},
		headerClick(column) {
			if (this.sort == column.field) {
				this.order = this.order == 'desc' ? 'asc' : 'desc';
			} else {
				this.sort = column.field;
				this.order = 'desc';
			}
		},
		getData() {
			if (!this.url) {
				//this.rowsData.push(...this.tableData)
				return;
			}
			if (!this.defaultLoadPage) {
				return;
			}
			this.load();
		},
		getImgSrc(imgs) {
			if (this.base.isEmpty(imgs)) {
				return [];
			}
			if (imgs.indexOf('base64,') != -1) {
				return [imgs];
			}
			if (Array.isArray(imgs)) {
				if (!imgs.length) {
					return [];
				}
				if (imgs[0].orginUrl) {
					return [this.http.ipAddress + imgs[0].orginUrl];
				}
				return [imgs[0].url];
			}
			let _imgs = imgs.split(',').map((x) => {
				if (x.startsWith('http')) {
					return x;
				}
				return this.http.ipAddress + x;
			});
			return _imgs;
		},
		getImgUrl(imgs){
			if (this.base.isEmpty(imgs)) {
				return [];
			}
			if (imgs.indexOf('base64,') != -1) {
				return [imgs];
			}
			if (Array.isArray(imgs)) {
				if (!imgs.length) {
					return [];
				}
				if (imgs[0].orginUrl) {
					return [this.http.ipAddress + imgs[0].orginUrl];
				}
				return [imgs[0].url];
			}
			let _imgs = imgs.split(',').map((x) => {
				if (x.startsWith('http')) {
					return x;
				}
				return {url: this.http.ipAddress + x};
			});
			return _imgs;
		},
		loadSource() {
			let dicKeys = this.inColumns
				.filter((x) => {
					return x.bind && x.bind.key && !x.bind.data.length;
				})
				.map((m) => {
					return m.bind.key;
				});
			if (!dicKeys.length) {
				return;
			}
			this.http.post('api/Sys_Dictionary/GetVueDictionary', dicKeys, true).then((result) => {
				result.forEach((item) => {
					this.inColumns.forEach((x) => {
						if (x.bind && x.bind.key && !x.bind.data.length && x.bind.key == item.dicNo) {
							x.bind.data = item.data;
						}
					});
				});
			});
		},
		cellClick(rowIndex, row, column) {
			this.$emit('cellClick', rowIndex, row, column);
		},
		rowButtons(index, row) {
			let _buttons = [];
			this.$emit('rowButtons', index, row, (buttons) => {
				_buttons = buttons;
			});
			// console.log(_buttons)
			return _buttons || []; //.reverse();
		},
		rowBtnClick(btn, rowindex, row) {
			this.$emit('rowButtonClick', btn, rowindex, row);
		},
		previewImage(urls, index) {
			const self = this; // 保存 this 引用
			console.log("+_+_+_+_+");console.log(urls,index);console.log("+_+_+_+_+");
			if(urls == undefined || urls == ''){
				console.log("上传图片111")
				uni.chooseImage({
				  count: 1, // 默认9，最多可以选择的图片张数
				  sizeType: ['original', 'compressed'], // 'original' 原图, 'compressed' 压缩图，默认二者都有
				  sourceType: ['album', 'camera'], // 'album' 从相册选择, 'camera' 使用相机，默认二者都有
				  success: function(res) {
					let tempFilePath = res.tempFilePaths[0];
					let size = res.tempFiles[0].size / 1024 / 1024;
					if (size > 2) {
						toast("上传图片不能大于2MB");
						return;
					};
					uni.showLoading();
					uni.uploadFile({
						url: self.Ip+'api/'+self.biaoMing+'/Upload',
						filePath: tempFilePath,
						name: 'file',
						// formData: {
						//   app_id: AppId,
						//   resp_type: "json",
						//   filename: new Date().getTime() + '.jpg',
						//   type: 'headimg'
						// },
						success(res) {
						  console.log('/upload/uploadimgqweqqqqqq', res)
						  uni.hideLoading();
						  if (res.statusCode == 200) {
							// let data = JSON.parse(res.data);
							// if (data.ret_code == 0) {
							//   let url = data.data.url;
							//   callback(url);
							// } else {
							//   toast(data.ret_msg);
							// }
							 console.log("图片是否上传成功true")
						  }else{
							  console.log("图片是否上传成功false")
						  }
						},
						error(e) {
							console.log(e);console.log("上传土拍")
						},
					});
				  }
				});
			}else{
				// 图片预览
				uni.previewImage({
					current: index,
					urls: this.getImgSrc(urls),
					longPressActions: {}
				});
			}
			
		},
		initSummary() {
			if (this.summary.length) {
				this.hasSummary = true;
				return;
			}
			this.biaoMing = this.biaoming;
			this.Ip = this.IP;
			console.log(this.columns);console.log("this.columns");
			console.log(this.biaoMing);console.log("this.biaoming");
			console.log(this.Ip);console.log("this.IP");
			this.summary = this.columns
				.filter((x) => {
					return x.summary;
				})
				.map((x) => {
					let obj = {};
					obj[x.field] = 0;
					return obj;
				});
			this.hasSummary = this.summary.length > 0;
		},
		caclHeaderHeight() {
			if (this.direction == 'list') {
				return;
			}
			var view = uni.createSelectorQuery().in(this).select('.vol-table-head');
			view.boundingClientRect().exec((res) => {
				if (this.lastHeight > 0 && this.lastHeight == this.tableHeight) {
					return;
				}
				this.tableHeight =
					this.tableHeight -
					(
						res[0] || {
							height: 0
						}
					).height;
				this.lastHeight = this.tableHeight;
			});
		},
		checkAll() {
			this.checked = !this.checked;
			this.rowsData.forEach((x) => {
				this.$set(x, 'ck', this.checked);
			});
			this.sendDataToParent();
		},
		getSelectRows() {
			return this.rowsData.filter((x) => {
				return x.ck;
			});
		},
		rowItemCheckClick(row, index) {
			// console.log('rowItemCheckClick');
			// #ifdef MP-WEIXIN
			this.tableData[index].ck = !row.ck;
			// #endif
			this.$set(row, 'ck', !row.ck);
		},
		showColumn(row, column) {
			if (!column.showColumn) {
				return true;
			}
			return column.showColumn(row, column);
		},
		async afterRead(option,index, event) {
			// console.log(this.rowsData)
			const self = this;
			option.url = 'api/'+self.biaoMing+'/Upload'
			// option.Code
			console.log(index);
			console.log(option);console.log(event);console.log("获取配置项")
			try {
				if (!option.url) {
					return this.$toast('未配置好url')
				}
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [];
				if (option.multiple) {
					lists = [].concat(event.file)
				} else {
					if (Array.isArray(event.file)) {
						lists.push(...event.file)
					} else {
						lists.push(event.file)
					}
				}
				this.$toast('上传中...')
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, option.url);
					// result 返回得是Upload/Tables/q_operations/202503/
					let fileName = lists[i].name;
					if (!fileName && lists[i].thumb) {
						let lastIndex = lists[i].thumb.lastIndexOf('/') + 1;
						fileName = lists[i].thumb.substr(lastIndex)
					}
					Object.assign(this.inFormFields,event.file, { status: 'success', message: '', orginUrl: result + fileName});
					console.log(this.inFormFields);console.log("this.inFormFields")
					let item = {
						index:index,
						orginUrl: this.inFormFields?.orginUrl,
						code: option.Code
					}
					this.urlCode.push(item)
					console.log(this.urlCode)
					// this.fileList[index] = this.convertArgumentsToArray(this.inFormFields);
					const newData = { ...this.inFormFields }; 
					if(this.fileList[index]){
						this.fileList[index].push(newData);
					}else{
						this.$set(this.fileList, index, [newData]);
					}
					console.log(this.rowsData)
					// 用map映射来处理表格数组
					this.rowsData = this.rowsData.map(item => {
					  // 找到 list1 中所有匹配的 orginUrl
					  const matches = this.urlCode.filter(urlItem => urlItem.code === item.Code);
					 
					// 如果有相同的code找到的数组进入判断
					  if (matches.length > 0) {
					    // 提取所有匹配的 orginUrl，并去重
					    const uniqueUrls = [...new Set(matches.map(match => match.orginUrl))];
						
					    // 拼接 orginUrl：在新增图片时候要提交orginUrl字段
					    const orginUrl = uniqueUrls.join(',');
						console.log(orginUrl);
						console.log("orginUrl");
						// 编辑的时候u-upload组件是用Image字段回显图片，此处判断是否有，有的话就拼接
						let newImage = item.Image ? `${item.Image},${orginUrl}` : orginUrl;
						const newImaList = newImage.split(',');
						console.log(newImaList);
						console.log("newImaList");
						let ArrIma = [...new Set(newImaList)];
						newImage = ArrIma.join(",");
					    // 返回新的对象
					    return {
					      ...item,
					      orginUrl,
						  Image: newImage,
					      url: "api/"+self.biaoMing+"/Upload"
					    };
					  } else {
					    // 如果没有匹配的 orginUrl，返回原对象
					    return item;
					  }
					});
					this.sendDataToParent()
					console.log(this.rowsData);
					console.log(JSON.stringify(this.urlCode));
				} 
				//})
			} catch (error) {
				this.$toast('图片上传出错')
				console.log("图片上传出错",error);
			}
		},
		uploadFilePromise(url, apiUrl) {
			return new Promise((resolve, reject) => {
				console.log(this.http.ipAddress + apiUrl,this.$store.getters.getToken());console.log("图片上传之后的地址")
				let a = uni.uploadFile({
					url: this.http.ipAddress + apiUrl, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'fileInput',
					header: {
						"uapp": 1,
						"Authorization": this.$store.getters.getToken()
					},
					formData: {},
					success: (res) => {
						setTimeout(() => {
							resolve(JSON.parse(res.data).data)
						}, 500)
					},
					fail(res) {
						this.$toast('上传失败')
						//console.log(res)
					}
				});
			})
		},
		// 删除图片
		deletePic(index,item, event) {
			this.rowsData = Object.values(this.rowsData);
			const Imagearr = this.rowsData[index].Image.split(",");
			let newArr = [];
			let endArr = [];
			if(this.urlCode){
				for(let i=0;i<this.urlCode.length;i++){
					if(this.urlCode[i].index == index){
						newArr.push(this.urlCode[i]);
					}else{
						endArr.push(this.urlCode[i])
					}
				}
			}
			newArr.splice(event.index, 1);
			this.urlCode = [...endArr,...newArr];
			Imagearr.splice(event.index, 1)
			const strImage = Imagearr.join(',');
			this.rowsData[index].Image = strImage;
			this.rowsData[index].orginUrl = strImage;
			this.sendDataToParent()
		},
	},
	created() {
		console.log('created');
		this.initSummary();
		this.getData();
		this.inColumns = this.columns;
		if (this.loadKey) {
			this.loadSource();
		}
		this.tableHeight = this.height;
		// this.sendDataToParent()
	},
	mounted() {
		if (this.autoHeight && this.height <= 0) {
			uni.getSystemInfo({
				success: (resu) => {
					var view = uni.createSelectorQuery().in(this).select('.vol-table');
					view.boundingClientRect().exec((res) => {
						this.tableHeight = resu.windowHeight - res[0].top;
						if (this.hasSummary) {
							this.tableHeight = this.tableHeight - 49;
						}
						this.caclHeaderHeight();
					});
				}
			});
		} else {
			this.caclHeaderHeight();
		}
	},
	watch: {
		height(newVal) {
			// console.log(newVal);
			if (newVal <= 0) {
				return;
			}
			this.tableHeight = newVal;
			this.caclHeaderHeight();
		},
		// #ifdef MP-WEIXIN
		inColumns: {
			handler(newValue, oldValue) {
				if (newValue && newValue.length) {
					this.$emit('update:columns', newValue);
					this.initSummary();
				}
			},
			immediate: true,
			deep: true
		},
		columns: {
			handler(newValue, oldValue) {
				this.inColumns = newValue;
			},
			immediate: true,
			deep: true
		},
		// #endif
		tableData: {
			handler(newValue, oldValue) {
				// 删除时此处newValue 是个空数组11
				if(oldValue != undefined && oldValue.length !=0){
					if(newValue.length == 0 && this.detaiDelStatu != 'del'){
						this.rowsData = oldValue;
					}else{
						this.rowsData = newValue;
					}
				}
				if(newValue.length !=0){
					this.rowsData = newValue;
				}
			},	
			immediate: true,
			deep: true
		}
	}
};
</script>

<style lang="less" scoped>
* {
	box-sizing: border-box;
}
.tableButtom {
	text-align: center;
	line-height: 36px;
	color: #999;
	background-color: #f9f9f9;
}
.wuShuJv {
	position: absolute;
	margin-left: 50%;
	bottom: 10rpx;
	transform: translateX(-50%);
}

.tableBox {
	position: relative;
	overflow: auto;
	min-height: 500rpx;
}
.vol-table-head {
	display: inline-block;
	// padding: 0 8rpx;
	// display: flex;
	background: pink;
	// align-items: center;
	background: #f3f3f3;
	text-align: center;
	font-weight: bold;
	// overflow: auto;
	white-space: nowrap;

	.vol-table-head-cell {
		padding: 18rpx 6rpx;
		// flex: 1;
		// width: 0;
		display: inline-block;
		width: 190rpx;
		font-size: 26rpx;
		height: 100%;

		.cell-order {
			color: #abadb1;
		}

		.acitved-sort.acitved-order {
			color: #4097f8;
		}
	}
}

.vol-table-body {
	overflow: auto;
	display: inline-block;
	// background-color: #4097f8;
}
.vol-table-body-rows {
	display: flex;
	// padding: 0 8rpx;
	align-items: center;
	// overflow: auto;
	// white-space: nowrap;

	.vol-table-body-cell {
		word-break: break-all;
		padding: 0 6rpx;
		text-align: center;
		flex: 1;
		width: 0;
		// display: inline-block;
		width: 190rpx;
		font-size: 24rpx;
		color: #484848;
		// white-space: wrap !important;

		.vol-cell {
			padding: 30rpx 0rpx;
		}
	}

	.text-inline {
		.vol-cell {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.vol-table-cell-left {
	text-align: left !important;
}
.cell-ck {
	width: 52rpx !important;
	// flex: none !important;
	padding: 0 8rpx;
	// min-height: 55rpx;
	display: flex;
	justify-content: center;
	view {
		width: 100%;
	}
}
.vol-table-summary {
	bottom: 0;
	width: 100%;
	background: #f3f3f3 !important;
	z-index: 999;
	position: absolute;
	font-weight: bold;
}

.vol-table-body-rows:nth-child(even) {
	background: #f9f9f9;
	border-top: 1px solid #f3f3f3;
	border-bottom: 1px solid #f3f3f3;
}

.cell-index {
	display: inline-block;
	width: 30px;
	padding: 28rpx 6rpx;
	font-size: 26rpx;
	text-align: center;
	color: #6a6a6a;
}
</style>

<style scoped lang="less">
.vol-table-list {
	padding: 14rpx 0;
	background: #f9f9f9;
}

.vol-table-list-item-title {
	text-align: left;
	margin: 18rpx 0 14rpx 22rpx;
	font-size: 28rpx;
	line-height: 30rpx;
	padding-left: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	.vol-table-list-item-title-left {
		flex: 1;
		font-size: 28rpx;
		// font-weight: bold;
	}

	.vol-table-list-item-title-border {
		display: inline-block;
		background: #818181;
		padding: 7px 2px;
		border-radius: 4px;
		margin-right: 5px;
	}
}

.vol-table-list-item {
	margin: 8rpx 16rpx;
	background: #ffffff;
	box-shadow: 1px 1px 14px rgb(224 224 224);
	border: 1px solid #f3f3f3;
	border-radius: 10rpx;

	.vol-table-list-item-cell {
		display: flex;
		padding: 20rpx 28rpx;
		border-bottom: 1px solid #f9f9f9ee;
		font-size: 26rpx;

		.cell-left {
			border-radius: 5px;
			width: 180rpx;
			color: #5c5c5c;
		}

		.cell-right {
			flex: 1;
			width: 0;
			text-align: right;
			// overflow: auto;
		}
	}
}

.extent-button-item {
	display: flex;
	justify-content: flex-end;
	margin: 0rpx 16rpx;
	// padding: 10rpx;
	top: -10rpx;
	position: relative;
	background: #ffff;
	flex-flow: row wrap;
}

.extent-button {
	padding: 10rpx 10rpx;
	// display: inline-block;
	// float: right;
	// min-width: 20%;
	// margin-right: 20rpx;
	// margin-bottom: 20rpx;
}

.loading-warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;

	.loading-warp-msg {
		min-width: 120px;
		height: 40px;
		justify-content: center;
		background-color: #414141;
		align-items: center;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
		color: #fff;
	}
}
</style>
